<template>
  <div class="main">
    <template v-for="(item, index) in renderData" :key="index">
      <MaterialGroup
        ref="formGroup"
        :render-data="item"
        :rules="rules"
        :formValues="formValues"
        @formChange="handleChangeData"
      />
    </template>
  </div>
</template>
<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'

import MaterialGroup from './MaterialGroup.vue'

const store = useStore()
const props = defineProps({
  renderData: {
    type: Array,
    default: () => {
      return []
    }
  }
})

// const renderData = computed(() => store.getters?.preview?.renderData)
// debugger
// console.log(renderData.value)
const rules = computed(() => store.state?.preview?.rules)
const formValues = computed(() => store.state?.preview?.formValues)

const handleChangeData = (data) => {
  // store.dispatch('preview/changeData', data)
}
</script>
<style scoped lang="scss">
.main {
  border-radius: 8px;
}
</style>